<template>
  <div class="pt-20">
    <div class="w100 rows rowsm h-50 br-10 mb-12">
        <div class="rowsc rowsm fs-18 br-10 h100" style="width: 33%;" @click="active = 2,getList()" :style="active == 2 ? 'background-color: #E33636;color: #fff;' : 'background-color: #fff;color: #888;'">已通过</div>
        <div class="rowsc rowsm fs-18 br-10 h100" style="width: 33%;" @click="active = 1,getList()" :style="active == 1 ? 'background-color: #E33636;color: #fff;' : 'background-color: #fff;color: #888;'">未审批</div>
        <div class="rowsc rowsm fs-18 br-10 h100" style="width: 34%;" @click="active = 3,getList()" :style="active == 3 ? 'background-color: #E33636;color: #fff;' : 'background-color: #fff;color: #888;'">已驳回</div>
    </div>

    <div class="rowsa rowsm h100 mb-20">
            <div class="pl-20 pr-20 h-30 rowsc rowsm br-20 fs-16 pointer" style="padding:20px 20px" v-for="(item,index) in tab2"
              :key="index"
              :style="active2 == index ? 'color: #fff;background: #E33636;' : 'background-color: #fff;color: #666;'"
              @click="active2 = index,getList()">{{item}}</div>
          </div>

    <div class="w100 p-all-20 rowsb rowsm bgff br-16 mb-20" v-for="(item,index) in list" :key="index" @click="choseItem(item)">
        <div class="rowscl">
            <div class="fs-16 fw-b col333 mb-6" v-if="active2 == 0">{{item.name}}</div>
            <div class="fs-16 fw-b col333 mb-6" v-else>{{item.name ? item.name : tab2[active2]}}</div>
            <div class="fs-12 col666">{{item.createTime}}</div>
        </div>
        <div class="col666 fs-14">分类: {{tab2[active2]}} <span v-if="active2 == 0">/{{item.typeName}}</span></div>
        <div class="w-80 h-30 br-15 rowsc rowsm fw-b fs-12" style="border: 1px solid #E33636;color: #E33636;" v-if="item.status == 3">已驳回</div>   
        <!-- <div class="w-80 h-30 br-15 rowsc rowsm fw-b fs-12" style="border: 1px solid #00C82F;color: #00C82F;" v-if="item.status == 2">{{item.markNumber ? item.markNumber : '已通过'}}</div>    -->
        <!-- 已通过修改成积分 -->
         <div class="w-80 h-30 br-15 rowsc rowsm fw-b fs-12" style="border: 1px solid #00C82F;color: #00C82F;" v-if="item.status == 2">{{item.dfCount ? item.dfCount : '0'}}</div>   
        <div class="w-80 h-30 br-15 rowsc rowsm fw-b fs-12" style="border: 1px solid #4878FF;color: #4878FF;" v-if="item.status == 1">未审批</div>
    </div>
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    activeIndex: {
      type: Number,
      default: 2
    }
  },
  data() {
    return {
        active:2,
        active2:0,
        list:[],
        tab2: ['全部','基础劳动','社会公益劳动','劳动成果','劳动总结报告',],
        total:10,
        currentPage4: 1,
        // 分页
        pagination:{
          pageNum:1,
          pageSize:10
        }
    };
  },
  watch: {},
  computed: {},
  created() {
     if(this.activeIndex !=2){
      this.active = this.activeIndex
    }
  },
  mounted() {
   console.log('this.active2',this.active2)
    this.getList()
  },
  methods: {
    choseItem(item){
        this.$emit('choseItem',item,this.active2,0)
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.getList()
    },
     handleCurrentChange(val) {
        this.pagination.pageNum = val
        this.getList()
      },
    getList() {
      if(this.active2 == 0){
        let data = {
          status: this.active,
        }
        this.$axios.post(`proldconfig/listLdUtilsByUser?pageNum=${this.pagination.pageNum}&pageSize=${this.pagination.pageSize}`,{...data}).then(res => {
          if(res.data.code != 200) return this.$notify({
            title: '提示',
            message: res.data.msg
          });
          let {rows} = res.data
          this.list = rows
          this.total = res.data.total
          console.log('this.list',this.list, this.total)
        })
      }else if(this.active2 == 1){ // 基础劳动
          let data = {
            status: this.active,
          }
          this.$axios.post(`prold/list?pageNum=${this.pagination.pageNum}&pageSize=${this.pagination.pageSize}`,{...data}).then(res => {
            if(res.data.code != 200) return this.$notify({
              title: '提示',
              message: res.data.msg
            });
            let {rows} = res.data
            this.list = rows
            this.total = res.data.total
          })
          
      }else if(this.active2 == 2){ //社会公益劳动
          let data = {
            status: this.active,
          }
          this.$axios.post(`proldgy/list?pageNum=${this.pagination.pageNum}&pageSize=${this.pagination.pageSize}`,{...data}).then(res => {
            if(res.data.code != 200) return this.$notify({
              title: '提示',
              message: res.data.msg
            });
            let {rows} = res.data
            this.list = rows
            this.total = res.data.total
          })
      }else if(this.active2 == 3){ //劳动成果
          let data = {
            status: this.active,
          }
          this.$axios.post(`proldcg/list?pageNum=${this.pagination.pageNum}&pageSize=${this.pagination.pageSize}`,{...data}).then(res => {
            if(res.data.code != 200) return this.$notify({
              title: '提示',
              message: res.data.msg
            });
            let {rows} = res.data
            this.list = rows
            this.total = res.data.total
          })
      }else if(this.active2 == 4){ //劳动总结报告
        let data = {
          status: this.active,
        }
        this.$axios.post(`proldzj/list?pageNum=${this.pagination.pageNum}&pageSize=${this.pagination.pageSize}`,{...data}).then(res => {
          if(res.data.code != 200) return this.$notify({
            title: '提示',
            message: res.data.msg
          });
          let {rows} = res.data
          this.list = rows
          this.total = res.data.total
        })
      }
    }
  },
 
};
</script>
<style lang="scss" scoped>
.pointer{
  cursor: pointer;
}
/deep/.el-pager li.active{
  color: #E33636;
}
/deep/.el-pager li:hover{
  color: #E33636;
}
</style>